<template>
    <el-card style="width:285px;height:180px;float: left;" shadow='hover'>
        <div class="card-header">
            {{name}}
        </div>
        <div class="card-center">
            <slot name="header"></slot>
        </div>
        <div class="card-chart" >
            <slot name="center"></slot>
        </div>
        <div class="card-fotter">
            <slot name="footer"></slot>
        </div>
    </el-card>
    
</template>

<script>
export default {
    name:'default',
    props:['name']
}
</script>

<style scoped>
.card-header{
    font-size: 14px;
    color: darkgray;
}
.card-center{
    font-size: 24px;
}
.card-chart{
    height: 70px;
    border-bottom: 1px solid skyblue;
}
.card-fotter{
    margin-top: 10px;
}

</style>